<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import portServise from "@/apis";
import { roleDict, genderDict } from "@/dicts";
import { $confirm, $singleMsg } from "xt-public/plugins/utils/element.js";
import UserDrawer from "./components/drawer.vue";
import type Typings from "@/typings";

const drawer = ref();
const drawerController = {
  open(
    scope: Typings.User.scope | null,
    type: Typings.User.pageType = "check"
  ) {
    drawer.value.open(scope, type);
  },
};

const searchForm = ref<Pick<Typings.User.instacne, "name">>({
  name: "",
});
// 搜索栏 formJson
const searchFormJson = computed<Typings.XtPublic.SearchBar.formJson[]>(() => {
  return [
    {
      el: "input",
      span: 8,
      prop: "name",
      label: "名称",
    },
  ];
});

const columns = computed<
  Typings.XtPublic.Table.column<Typings.User.instacne>[]
>(() => {
  return [
    {
      prop: "name",
      label: "名称",
      clickFn: (scope) => {
        drawerController.open(scope, "check");
      },
    },

    {
      isHide: true,
      prop: "account",
      label: "账号",
    },
    {
      colType: "tag",
      prop: "roleId",
      label: "角色",
      options: roleDict,
    },
    {
      colType: "tag",
      prop: "gender",
      label: "性别",
      width: 100,
      options: genderDict,
    },
    {
      prop: "createdTime",
      label: "创建时间",
      colType: "time",
      format: "YYYY-MM-DD HH:mm:ss",
    },
  ];
});
const tableData = ref<Typings.User.instacne[]>([]);
const loading = ref<boolean>(false);
const pagination = ref<Typings.Common.tablePagination>({
  page: 1,
  size: 10,
  total: 0,
});
const controller = {
  async initTable() {
    controller.getList();
  },

  async getList() {
    const params = {
      page: pagination.value.page,
      size: pagination.value.size,
      ...searchForm.value,
    };

    try {
      loading.value = true;
      const { data } = await portServise.userListApi(params);
      tableData.value = data.list || [];
      pagination.value.total = data.total || 0;
    } finally {
      loading.value = false;
    }
  },

  create() {
    drawerController.open(null, "create");
  },
  update(scope: Typings.User.scope) {
    drawerController.open(scope, "update");
  },
  async delete(scope: Typings.User.scope) {
    await $confirm({
      tip: "确定要删除该用户吗？",
    });

    await portServise.userRemoveApi({ id: scope.row.id });

    $singleMsg({
      message: "删除成功",
    });

    controller.getList();
  },
};

onMounted(() => {
  controller.initTable();
});
</script>

<template>
  <div class="page-container w-full h-full overflow-hidden flex flex-col">
    <div class="search-container">
      <xt-search-bar
        :data="searchForm"
        :formJson="searchFormJson"
        @search="controller.getList"
        @reset="controller.getList"
      >
        <template #btn>
          <xt-link type="success" @click="controller.create">新增</xt-link>
        </template>
      </xt-search-bar>
    </div>
    <div class="table-container height-0 flex-1 overflow-hidden">
      <xt-table
        height="100%"
        v-loading="loading"
        :data="tableData"
        :columns="columns"
      >
        <template #operate>
          <xt-table-column label="操作" align="center" width="240">
            <template #default="scope">
              <xt-link class="mr-[8px]" @click="controller.update(scope)"
                >编辑</xt-link
              >
              <xt-link type="danger" @click="controller.delete(scope)"
                >删除</xt-link
              >
            </template>
          </xt-table-column>
        </template>
      </xt-table>
    </div>
    <div class="pagination-container mt-[10px] flex flex-row-reverse">
      <xt-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        @change="controller.getList"
      />
    </div>

    <user-drawer ref="drawer" @confirm="controller.getList" />
  </div>
</template>

<style lang="scss" scoped></style>
